<template>
  <div class="accumulation">
    <nav-bar></nav-bar>
    <div class="page-main clearfix">
      <div class="page-left">
        <div class="xyd-container">
          <div class="xyd-c-title">最近成功定制</div>
          <div class="xyd-c-content">
            <ul>
              <li v-for="i in 4">
                <div class="ttop">//小学语文二年级课件</div>
                <div class="tbottom">//发布人：伍二娃      接单人：陈立</div>
              </li>
            </ul>
          </div>
        </div>
        <small-carousel :data="ads"></small-carousel>
      </div>
      <div class="page-right">
        <div class="xyd-container">
          <div class="xyd-c-title clearfix">
            <span class="title">定制筛选</span>
          </div>
          <div class="xyd-c-content">
            <div class="select-head">
              <el-select
                v-model="catid"
                placeholder="定制筛选"
                @change="handleChange"
              >
                <el-option
                  v-for="item in category"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </div>
            <table class="xyd-list accumulation-list" v-loading.body="loading">
              <thead class="xyd-list-head">
                <tr>
                  <th class="h-item">定制</th>
                  <th class="h-item">悬赏金</th>
                  <th class="h-item"></th>
                </tr>
              </thead>
              <tbody class="xyd-list-body">
                <customized-item :value="item" v-for="item,i in task" :key="i"></customized-item>
              </tbody>
            </table>
            <div class="pagination-container">
              <el-pagination
                :page-size="offset"
                layout="total, prev, pager, next"
                :total="total"
                @current-change="handlePageChange"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="填写定制信息" top="20px" :visible.sync="dialogFormVisible" :before-close="reset">
      <el-form :model="form" style="padding: 37px 80px 0" v-if="progress === 0">
        <el-form-item label="标题：" :label-width="formLabelWidth">
          <el-input v-model="form.title" auto-complete="off" placeholder="请输入标题"></el-input>
        </el-form-item>
        <el-form-item label="资源类型：" :label-width="formLabelWidth">
          <el-select
            v-model="typeValue"
            placeholder="请选择资源类型"
            @change="handleTypeChange"
            style="width:360px;"
          >
            <el-option
              v-for="item in typeOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="资源版本：" :label-width="formLabelWidth">
          <div class="xyd-container">
            <div class="xyd-c-title" style="line-height:40px;">资源分类</div>
            <div class="xyd-c-content">
              <div v-if="sideCategory && sideCategory.length === 0" style="padding-left:10px;">暂无数据</div>
              <div style="height:300px;overflow:scroll">
                <el-tree
                  v-if="sideCategory && sideCategory.length !== 0"
                  :data="sideCategory"
                  :highlight-current="true"
                  :load="loadNode"
                  :props="props"
                  lazy>
                </el-tree>
              </div>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="悬赏金额：" :label-width="formLabelWidth">
          <el-input v-model="form.price" auto-complete="off" placeholder="请选择悬赏金额"></el-input>
        </el-form-item>
        <el-form-item label="需求描述：" :label-width="formLabelWidth">
          <el-input type="textarea" v-model="form.intro" placeholder="请输入你的描述"></el-input>
        </el-form-item>
      </el-form>
      <el-form :model="form" style="padding: 37px 80px 0" v-if="progress === 1">
        <el-form-item label="征集模式：" :label-width="formLabelWidth">
          <el-radio class="radio" v-model="form.sell_type" :label="0">购买使用权</el-radio>
          <el-radio class="radio" v-model="form.sell_type" :label="1">购买版权</el-radio>
        </el-form-item>
        <el-form-item label="赏金设置：" :label-width="formLabelWidth">
          <el-input v-model="form.per_price" auto-complete="off" placeholder="请输入金额">
            <template slot="append">钻石语点／件</template>
          </el-input>
        </el-form-item>
        <el-form-item label="可选稿件：" :label-width="formLabelWidth">
          <el-input v-model="form.choose_amount" auto-complete="off" placeholder="请输入数量">
            <template slot="append">件</template>
          </el-input>
        </el-form-item>
        <el-form-item label="征稿时间：" :label-width="formLabelWidth">
          <el-input v-model="form.days" auto-complete="off" placeholder="请输入时间">
            <template slot="append">天</template>
          </el-input>
        </el-form-item>
        <el-form-item label="联系QQ：" :label-width="formLabelWidth">
          <el-input v-model="form.qq_no" auto-complete="off" placeholder="请输入您的QQ"></el-input>
        </el-form-item>
        <el-form-item label="联系电话：" :label-width="formLabelWidth">
          <el-input v-model="form.phone" auto-complete="off" placeholder="请输入您的联系电话"></el-input>
        </el-form-item>
        <el-form-item label="版权协议：" :label-width="formLabelWidth">
          <div>
            <a href="">点击此处下载协议模版</a>
            <div>
              <el-button  size="small" @click="handleUpload">选择文件</el-button>
              <span>{{filename}}</span>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="" :label-width="formLabelWidth">
          <div><el-checkbox v-model="form.must_choose">承诺选稿</el-checkbox></div>
          <div><el-checkbox v-model="checked2">阅读并同意</el-checkbox><a href="">《晓语典网站发布私人定制协议》</a></div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="margin-bottom: 20px;">
        <div v-if="progress === 0">
          <button class="common-btn" style="width:360px;" @click="goNext">
            下一步
          </button>
        </div>
        <div v-if="progress === 1">
          <button class="common-btn" style="width:360px;" @click="handlePublish">
            发布
          </button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { NavBar } from 'views/layout'
import { getTasks, publishTask } from 'api/task'
import { getChild } from 'api/resource'
import Adv from 'views/components/adv'
import SmallCarousel from 'views/components/smallCarousel'
import ResourceItem from 'views/components/resourceItem'
import CustomizedItem from './customizedItem'
import pick from 'utils/file/picker'

export default {
  name: 'Listen',
  components: {
    NavBar,
    Adv,
    ResourceItem,
    CustomizedItem,
    SmallCarousel
  },
  data() {
    return {
      radio1: '',
      radio2: '',
      dialogFormVisible: false,
      progress: 0,
      formLabelWidth: '120px',
      form: {
        title: '',
        task_type_id: '',
        price: '',
        intro: '',
        sell_type: 0,
        days: '',
        qq_no: '',
        must_choose: false,
        choose_amount: '',
        per_price: ''
      },
      loading: false,
      filename: '文件名',
      typeOptions: [],
      typeValue: '',
      sideCategory: [],
      category: [],
      ads: [],
      checked1: true,
      checked2: true,
      total: 0,
      page: 1,
      offset: 10,
      task: [],
      props: {
        label: 'name',
        children: 'child'
      }
    }
  },
  created() {
    this.$store.dispatch('GetTops')
    .then(res => {
      this.category = res
    })
    .catch(err => console.log(err))
    this.loading = true
    getTasks({
      page: 1,
      offset: 10
    })
    .then(res => {
      console.log(res)
      this.loading = false
      this.total = res.data.page.last_page
      this.task = res.data.task
      this.ads = res.data.ads
    })
    .catch(err => {
      console.log(err)
      this.loading = false
    })
  },
  methods: {
    // 获取数据
    fetchData(params = {}) {
      this.loading = true
      getTasks({
        catid: this.catid,
        page: this.page,
        offset: this.offset,
        ...params
      })
      .then(res => {
        this.loading = false
        this.task = res.data.task
      })
      .catch(() => {
        this.loading = false
      })
    },
    // 清除条件搜索
    clear() {
      this.radio1 = '' // 双向绑定会自动触发请求
    },
    // 一级分类筛选
    handleChange1(a) {
      const ids = this.category.filter(v => v.name === a)
      let catid
      if (ids && ids.length !== 0) {
        catid = ids[0].id
      }
      this.catid = catid
      this.page = 1
      this.fetchData()
    },
    // 分页
    handlePageChange(page) {
      this.page = page
      this.fetchData()
    },
    // 定制弹框显示，并获取分类数据
    handleShowIWant() {
      this.dialogFormVisible = true
      this.$store.dispatch('GetTops')
      .then(res => {
        this.typeOptions = res
      })
      .catch(err => console.log(err))
    },
    // 关闭弹框前回调
    reset() {
      this.progress = 0
      this.dialogFormVisible = false
    },
    // 私人定制弹框，类型选择
    handleTypeChange(id) {
      this.task_type_id = id
      getChild({
        catid: id
      })
      .then(res => {
        this.sideCategory = res.data
      })
      .catch(err => console.log(err))
    },
    // 子级筛选获取下一级
    loadNode(node, resolve) {
      // node.level === 0时，下面的语句将为undefind
      // this.task_type_id = node.data.id
      if (node.level === 0) {
        return resolve(this.sideCategory)
      } else {
        this.task_type_id = node.data.id
        getChild({
          catid: node.data.id
        })
        .then(res => {
          resolve(res.data)
        })
        .catch(err => console.log(err))
      }
    },
    // 下一步
    goNext() {
      if (!this.form.title) {
        this.$message({
          message: '请填写标题',
          type: 'warning'
        })
        return false
      } else if (!this.task_type_id) {
        this.$message({
          message: '请选择资源分类',
          type: 'warning'
        })
        return false
      } else if (!this.form.price) {
        this.$message({
          message: '请填写悬赏金额',
          type: 'warning'
        })
        return false
      } else {
        this.progress = 1
      }
    },
    // 发布
    handlePublish() {
      publishTask({
        ...this.form,
        agreement: this.file,
        task_type_id: this.task_type_id
      })
      .then(res => {
        console.log(res)
        this.progress = 0
        this.dialogFormVisible = false
      })
      .catch(err => {
        this.$message({
          message: err.msg,
          type: 'warning'
        })
      })
    },
    // 上传
    handleUpload() {
      pick()
      .then(file => {
        this.file = file
        this.filename = file.name
      })
      .catch(err => console.log(err))
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.accumulation{
  .page-main{
    .page-left{
      .xyd-container{
        .xyd-c-content{
          >ul{
            padding: 12px;
            >li{
              &:last-child{
                border-bottom: 0;
              }
              height: 70px;
              padding: 15px 0;
              border-bottom: 1px solid #e5e6e7;
              .ttop{
                line-height: 20px;
              }
              .tbottom{
                color: #999;
                font-size: 12px;
                line-height: 20px;
              }
            }
          }
        }
      }
    }
    .page-right{
      .xyd-container{
        .xyd-c-title{
          padding: 0 20px;
          >span.title{
            float: left;
          }
          >a{
            float: right;
            font-size: 14px;
          }
        }
        .xyd-c-content{
          padding: 0 40px;
          .select-head{
            margin: 20px 0;
          }
          .radio-container{
            padding: 20px 0;
            border-bottom: 1px solid #e5e6e7;
          }
          .btn-group{
            padding: 20px 0;
            .right{
              float: right;
            }
            .yellow-btn{
              width: 100px;
              height: 30px;
              font-size: 14px;
            }
            .orange-btn{
              width: 100px;
              height: 30px;
              font-size: 14px;
            }
          }
        }
      }
    }
  }
}
</style>